// let array = [
//     0 ,1 ,2 ,3 ,4,
//     15,16,17,18,5,
//     14,23,24,19,6,
//     13,22,21,20,7,
//     12,11,10,9 ,8
// ]
// 坐标系
// x++  y++ x-- y--

class Init {
    constructor() {
        this.ul = null;
        this.lis = null;
        this.size = 8;
        this.sizeGird = 50;
        this.len = null;
        this.li = null;
        /**
         * row 行
         * col 列
         * min 最小值
         * max 最大值
         */
        this.row = 0;
        this.col = 0;
        this.min = 0;
        this.max = this.size - 1;

        this.array = [];
        this.iNow = 0;
        // 保存背景图相关
        this.bgArr = [];
    }
    start() {
        this.ul = document.querySelector('#list');
        this.lis = document.getElementsByTagName('li');
        this.len = this.size * this.size;

        this.ul.style.width = this.sizeGird * this.size + 'px';

        // 创建元素
        for (let i = 0; i < this.len; i++) {
            this.li = document.createElement('li');
            this.li.style.width = this.sizeGird + 'px';
            this.li.style.height = this.sizeGird + 'px';
            this.ul.appendChild(this.li);
        }

        // 寻找坐标系
        for (let i = 0; i < this.len; i++) {
            // this.lis[this.row * this.size + this.col].innerHTML = i;
            this.array.push(this.lis[this.row * this.size + this.col]);
            // 寻找拐点
            if (this.row == this.min && this.col < this.max) {
                // 列等于最小值并且行小于最大值 - 向右
                this.col = this.col + 1;
            } else if (this.col == this.max && this.row < this.max) {
                // 行等于最大值并且列小于最小值 - 向下
                this.row = this.row + 1;
            } else if (this.row == this.max && this.col > this.min) {
                // 行等于最大值并且列小于最小值 - 向左
                this.col = this.col - 1;
            } else if (this.col == this.min && this.row > this.min) {
                // 列等于最小值并且行小于最小值 - 向上
                this.row = this.row - 1;
            }

            // row - 1 等于最小值并且列等于最小值 - 进入内环 缩短环数
            if (this.row - 1 == this.min && this.col == this.min) {
                this.min = this.min + 1;
                this.max = this.max - 1;
            }
        }
        // this.showImg();

        this.dynamicEffect();
    }
    showImg() {
        // setInterval(() => {
        //     for(let i = 0; i < this.lis.length; i++){
        //         this.lis[i].style.backgroundImage = '';
        //     }
        //     this.array[this.iNow].style.backgroundImage = 'url("img/'+ Math.floor(Math.random() * 13 + 1) +'.jpg")';
        //     this.iNow++;
        // }, 200);
    }
    dynamicEffect() {
        for (let i = 0; i < this.lis.length; i++) {
            let bgImage = 'url("img/' + Math.floor(Math.random() * 13 + 1) + '.jpg")';
            // 每隔五张随机生成一个图片
            if (i % 5 == 0) {
                this.array[i].style.backgroundImage = 'url("img/' + Math.floor(Math.random() * 13 + 1) + '.jpg")';
                this.bgArr.push([i, bgImage]);
            }
        }
        this.run();
        setInterval(this.run.bind(this), 200);
    }
    run() {
        for (let i = 0; i < this.lis.length; i++) {
            this.lis[i].style.backgroundImage = '';
            this.lis[i].className = '';
        }

        for (let i = 0; i < this.bgArr.length; i++) {
            this.bgArr[i][0] = this.bgArr[i][0] + 1;
            if (this.array[this.bgArr[i][0]]) {
                this.array[this.bgArr[i][0]].style.backgroundImage = this.bgArr[i][1];
                this.array[this.bgArr[i][0]].className = "active";
                this.array[this.bgArr[i][0]].style.animationDelay = -Math.random() * 2 + 's';
            } else {
                this.bgArr.pop();
                let bgImage = 'url("img/' + Math.floor(Math.random() * 13 + 1) + '.jpg")';
                this.bgArr.unshift([0, bgImage]);
            }
        }
    }
}

let init = new Init();
init.start();